import React from 'react'

const Collection = () => {
    // 获取当前位置的 URL 中的查询参数
    const [searchParams, setSearchParams] = React.$Router.useSearchParams()

    // 将参数中名为 'action' 的值存储在React状态中
    const [action, setAction] = React.useState(searchParams.get('action'))

    // 初始化路由跳转对象
    const navigate = React.$Router.useNavigate()

    // 搜索关键字
    const [keyword, setKeyword] = React.useState('')

    // 返回商品数据
    const [list, setList] = React.useState([])

    // ref对象
    const listRef = React.useRef(null)

    const [finished, setFinished] = React.useState(false)

    let CollDataRef = React.useRef([])

    // 当搜索框的值发生变化时
    React.useEffect(() => {
        CollDataRef.current = []
        page.current = 1
        setList([])
        getCollectionData()
    }, [keyword])

    // 用ref定义分页的值，可以每次拿到最新
    let page = React.useRef(1)

    // 获取收藏数据
    const getCollectionData = async () => {
        setFinished(true)
        const data = {
            action,
            keyword,
            page: page.current,
            busid: React.$Cookies.load('LoginAuth').id
        }
        let result = await React.$Api.BaseCollection(data)
        // console.log(result);
        if (result) {
            if (result.code === 1) {

                CollDataRef.current = CollDataRef.current.concat(result.data)
                setList(CollDataRef.current)

                page.current = page.current + 1

                setFinished(false)
            } else {
                // React.$Vant.Toast.info("暂无商品")
                setFinished(true)
                return false
            }
        }
    }

    // 下拉刷新的方法
    const Refresh = () => {
        CollDataRef.current = []
        setList([])
        page.current = 1
        setFinished(false)

        return new Promise((resolve) => {
            setTimeout(() => {
                React.$Vant.Toast.info('刷新成功')
                resolve(true)
            }, 1000)
        })
    }

    // 上拉加载数据
    const load = async () => {
        getCollectionData()
    }

    const onBack = () => {
        navigate(-1)
    }

    const Nav = () => {
        return (
            <React.$Vant.Sticky>
                <React.$Vant.NavBar
                    title='我的收藏'
                    leftText='返回'
                    onClickLeft={onBack}
                />
            </React.$Vant.Sticky>
        )
    }

    // 收藏列表组件
    const Items = () => {
        if (list.length === 0) {
            return <React.$Vant.Empty image="search" description="暂无收藏" />
        }
        return list.map((item, index) => {
            if (action === 'product') {
                return (
                    <li key={index}>
                        <React.$Router.NavLink to={`/product/product/info?proid=${item.proid}`}>
                            <img src={item.product.cover_cdn} alt="" />
                            <p>{item.product.name}</p>
                            <span>价格：{item.product.rent_price}</span>
                        </React.$Router.NavLink>
                    </li>
                )
            }
            if (action === 'category') {
                return (
                    <li key={index}>
                        <React.$Router.NavLink to={"/category/category/info?id=" + item.cateid}>
                            <img src={item.category.image_cdn} alt="" />
                            <p>{item.category.name}</p>
                            <span style={{ color: '#b6b6b6' }}>收藏时间：{item.createtime_text}</span>
                        </React.$Router.NavLink>
                    </li>
                )
            }

        })
    }

    return (
        <>
            <Nav />

            {/* 搜索框 */}
            <React.$Vant.Search value={keyword} onChange={setKeyword} align="center" placeholder="请输入搜索关键词" />

            {/* 列表 */}
            <React.$Vant.PullRefresh onRefresh={Refresh} onRefreshEnd={() => listRef.current?.check()}>

                {/* List 组件可以与 PullRefresh 组件结合使用，实现下拉刷新的效果 */}
                <React.$Vant.List ref={listRef} onLoad={load} offset={5} finished={finished}>
                    <div className="left_kuangs">
                        <ul>
                            <Items />
                        </ul>
                    </div>
                </React.$Vant.List>

            </React.$Vant.PullRefresh>

            {/* 占位 */}
            <div style={{ height: ".75rem" }}></div>
        </>
    )
}

export default Collection